<template>
  <div class="center-chart-1">
    <div class="top">
      <dv-scroll-board
        v-if="config1.data"
        :config="config1"
        class="lc1-chart"
      />
      <div v-else class="no-data">暂无数据</div>
    </div>
    <div class="bottom">
      <div class="title">昨日注胚生产统计</div>
      <dv-scroll-board
        v-if="config2.data"
        :config="config2"
        class="lc1-chart"
      />
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
import { queryInjectProductCondition } from "@/api/dashboard/injectionWorkshop";
export default {
  name: "CenterChart1",
  props: {
    refreshKey: {
      type: Number,
      default: 0,
    },
    workshopItem: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      config1: {},
      config2: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      if (!this.workshopItem?.value) {
        return;
      }

      let injectCondition = [];
      let preInject = [];

      try {
        const res = await queryInjectProductCondition({
          workshopId: this.workshopItem.value,
        });
        injectCondition = res.data.equipConditionMap.injectCondition || [];
        preInject = res.data.equipConditionMap.preInject || [];
      } catch (error) {
        injectCondition = [];
        preInject = [];
      }

      this.formatter1(injectCondition);

      this.formatter2(preInject);
    },
    formatter1(tableData) {
      if (!tableData?.length) {
        this.config1 = {};
        return;
      }

      const collectList = tableData[0]?.collectList || [];

      let headList = collectList.map(
        (ele) =>
          `<span class="${ele.equipStatus == "0" ? "off" : ""}">${
            ele.lineName
          }</span>`
      );
      let columnWidth = collectList.map((ele) => 1000);
      let dataList = [];

      tableData.forEach((row) => {
        let rowObj = [row.singleName];
        if (row.collectList?.length) {
          row.collectList.forEach((col) => {
            if (row.singleName.indexOf("生产进度") != -1) {
              rowObj.push(
                `<span class='process'><span class='process-inner ${
                  col.equipStatus == "0" ? "status-off" : "status-on"
                }' style='width:${col.latestCollectValue};'>${
                  col.latestCollectValue
                }</span></span>`
              );
            } else {
              rowObj.push(col.latestCollectValue);
            }
          });
        }
        dataList.push(rowObj);
      });

      this.config1 = {
        headerBGC: "#050f67",
        header: ["机台", ...headList],
        data: dataList,
        rowNum: 4,
        columnWidth: [1000, ...columnWidth],
        headerHeight: 28,
        align: ["center"],
        oddRowBGC: "#053a6d",
        evenRowBGC: "#091c56",
      };
    },
    formatter2(tableData) {
      if (!tableData?.length) {
        this.config2 = {};
        return;
      }

      const collectList = tableData[0]?.collectList || [];

      let headList = collectList.map((ele) => ele.lineName);
      let columnWidth = collectList.map((ele) => 1000);
      let dataList = [];

      tableData.forEach((row) => {
        let rowObj = [row.singleName];
        if (row.collectList?.length) {
          row.collectList.forEach((col) => {
            rowObj.push(col.latestCollectValue);
          });
        }
        dataList.push(rowObj);
      });

      this.config2 = {
        headerBGC: "#050f67",
        header: ["机台", ...headList],
        data: dataList,
        rowNum: 2,
        columnWidth: [800, ...columnWidth],
        headerHeight: 24,
        align: ["center"],
        oddRowBGC: "#053a6d",
        evenRowBGC: "#091c56",
      };
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.center-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  gap: 8px;
  padding-top: 35px;
  .top {
    flex: 14;
  }
  .bottom {
    flex: 11;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .title {
      width: 100%;
      height: 24px;
      line-height: 24px;
      font-size: 13px;
      text-align: center;
      background-color: #151933;
    }
    .lc1-chart {
      flex: 1;
    }
  }
  ::v-deep .dv-scroll-board {
    .header {
      font-size: 12px;
      .header-item {
        padding: 0 5px;
        white-space: normal;
        line-height: 12px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    }

    .rows .ceil {
      font-size: 12px;
      white-space: unset;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .off {
      color: #f54e1e;
    }

    .process {
      display: inline-block;
      width: 100%;
      height: 100%;
      border-radius: 3px;
      text-align: left;
      overflow: hidden;
      background-color: #d3d6e0;
      &-inner {
        display: inline-block;
        height: 100%;
        text-align: center;
      }
      .status-on {
        background-color: #92d050;
      }
      .status-warn {
        background-color: #f5b335;
      }
      .status-off {
        background-color: #f54e1e;
      }
    }
  }
}
.no-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
